<!-- 头部信息 -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">新闻类型管理</h1>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- 头部信息 -->

<!-- 主要工作区 -->
<section class="content">
    <div class="container-fluid">
        <div class="row" style="margin-bottom: 20px">
            <button id="btnAdd" type="button" class="btn btn-secondary">添加</button>&nbsp;&nbsp;
            <button id="btnDel" type="button" class="btn btn-secondary">删除</button>&nbsp;&nbsp;
            <button id="btnEdit" type="button" class="btn btn-secondary">修改</button>&nbsp;&nbsp;
            <button id="btnSelect" type="button" class="btn btn-secondary">全查询</button>&nbsp;&nbsp;
        </div>
        <!-- /.row -->
        <!-- Main row -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <!-- ./card-header -->
                    <div class="card-body">
                        <table class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>
                                    <input type="checkbox">
                                </th>
                                <th>id</th>
                                <th>名称</th>
                            </tr>
                            </thead>
                            <tbody id="tbodyInfo">
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>John Doe</td>
                                <td>11-7-2014</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>John Doe</td>
                                <td>11-7-2014</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>John Doe</td>
                                <td>11-7-2014</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>John Doe</td>
                                <td>11-7-2014</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
        </div>
    </div>
</section>
<!-- 主要工作区 -->


<!--弹出模态框框-->
<!--TODO 弹出模态框用于添加或修改-->
<div class="modal fade" id="modalSave" style="display: none;" aria-hidden="true"  data-save="add">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modalTitle" class="modal-title">新闻类型添加</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">

                <form class="form-horizontal">
                    <div class="card-body">
                        <div class="form-group row">
                            <label for="name" class="col-3 col-form-label">类型名称：</label>
                            <div class="col-9">
                                <input type="hidden" class="form-control" id="id">
                                <input type="text" class="form-control" id="name" placeholder="请输入新闻类型名称">
                            </div>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="save" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>


<script>

    function getAll() {
        //采用AJAX【异步请求】请求后端，Ajax异步请求真正的对象是XMLHttpRequest，简称XHR
        //   admin/newsTypeController.action
        //参数：
        //1——请求地址url
        //2——发送参数到后端data
        //3——后端响应的数据是什么格式dataType
        //4——前端以什么方式请求后端type
        //5——请求之前发生的事件beforeSend，这是一个fn
        //XMLHttpRequest参数：表示XMLHttpRequest的原生对象
        //6——成功响应（http响应编码是200）结果事件success，这是一个fn
        //data参数：后端响应的结果
        //textStatus参数：http响应编码
        //jqXHR参数：表示jquery的XMLHttpRequest的对象
        //7——失败响应结果事件error，这是一个fn
        //XMLHttpRequest参数：表示XMLHttpRequest的原生对象
        //textStatus参数：失败信息
        //errorThrown参数：失败信息
        //8——不管响应失败还是成功都执行：complete，这是一个fn
        //XMLHttpRequest参数：表示XMLHttpRequest的原生对象
        //textStatus参数：信息
        $.ajax({
            url: "/admin/newsType/getAll.action",
            dataType: "json",
            type: "get",
            beforeSend: function (XMLHttpRequest) {
                console.log("准备开始请求后端..............");
                //开启蒙版
                loadingOpen();
            },
            success: function (data, textStatus, jqXHR) {
                console.log("响应成功..............");
                if (data.result) {
                    //清空tbody
                    $("#tbodyInfo").empty();
                    //添加后端数据到tbody
                    $(data.data).each(function (index, item) {
                        $("#tbodyInfo").append("                            <tr>\n" +
                            "                                <td><input value='" + item.id + "' type=\"checkbox\"></td>\n" +
                            "                                <td>" + item.id + "</td>\n" +
                            "                                <td>" + item.name + "</td>\n" +
                            "                            </tr>");
                    });
                } else {
                    window.alert(data.mess);
                }

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("响应失败.............." + errorThrown);
            },
            complete: function (XMLHttpRequest, textStatus) {
                console.log("响应结束..............");
                //结束蒙版
                loadingClose();
                //测试使用
                //window.setTimeout(loadingClose,5000);
            }
        });
    }

    $(function () {
        //1——初始化
        getAll();
        //2——各种按钮添加事件
        //TODO 新闻类型弹出添加框按钮
        $("#btnAdd").click(function () {
            //设置弹出框标记data-save值为add
            $("#modalSave").data("save","add");
            $("#modalTitle").text("新闻类型添加");
            $("#name").val("");
            $('#modalSave').modal('show');

        });
        //TODO 新闻类型删除
        $("#btnDel").click(function () {
            //window.alert("删除");
            //脚本比较是==和===
            //==只比较值，不比较数据类型，例如12等于"12"
            //===比较值和数据类型，例如12不等于"12"
            if ($("#tbodyInfo :checkbox:checked").length === 0) {
                window.alert("你没有选中任何要删除的数据")
                return;
            }

            //删除确认
            if (window.confirm("你是否真的删除")) {
                $.ajax({
                    url: "/admin/newsType/del.action",
                    dataType: "json",
                    type: "get",
                    data: {
                        id: $("#tbodyInfo :checkbox:checked").val()
                    },
                    beforeSend: function (XMLHttpRequest) {
                        console.log("准备开始请求后端..............");
                        //开启蒙版
                        loadingOpen();
                    },
                    success: function (data, textStatus, jqXHR) {
                        console.log("响应成功..............");
                        if (data.result) {
                            getAll();
                        } else {
                            window.alert(data.mess)
                        }

                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log("响应失败.............." + errorThrown);
                    },
                    complete: function (XMLHttpRequest, textStatus) {
                        console.log("响应结束..............");
                        //结束蒙版
                        loadingClose();
                    }
                });
            }


        });
        //TODO 新闻类型修改之前
        $("#btnEdit").click(function () {
            if ($("#tbodyInfo :checkbox:checked").length === 0) {
                window.alert("你没有选中任何要修改的数据")
                return;
            }


            // window.alert($("#tbodyInfo :checkbox:checked").val());

            $.ajax({
                url: "/admin/newsType/editBefore.action",
                dataType: "json",
                type: "get",
                data: {
                    id: $("#tbodyInfo :checkbox:checked").val()
                },
                beforeSend: function (XMLHttpRequest) {
                    console.log("准备开始请求后端..............");
                    //开启蒙版
                    loadingOpen();
                },
                success: function (data, textStatus, jqXHR) {
                    console.log("响应成功..............");
                    if (data.result) {
                        //弹出修改框
                        //设置弹出框标记data-save值为edit
                        $("#modalSave").data("save","edit");
                        $("#id").val(data.data.id);
                        $("#name").val(data.data.name);
                        $("#modalTitle").text("新闻类型修改");
                        $('#modalSave').modal('show');
                    } else {
                        window.alert(data.mess);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log("响应失败.............." + errorThrown);
                },
                complete: function (XMLHttpRequest, textStatus) {
                    console.log("响应结束..............");
                    //结束蒙版
                    loadingClose();
                }
            });


        });
        //TODO 新闻类型查询
        $("#btnSelect").click(function () {
            //window.alert("查询");
            getAll();
        });

        //TODO 新闻类型添加或者修改
        $("#save").click(function () {

            switch ($("#modalSave").data("save")) {
                case "add":
                    //添加
                    $.ajax({
                        url: "/admin/newsType/add.action",
                        dataType: "json",
                        type: "post",
                        data: {
                            name: $("#name").val()
                        },
                        beforeSend: function (XMLHttpRequest) {
                            console.log("准备开始请求后端..............");
                            //开启蒙版
                            loadingOpen();
                        },
                        success: function (data, textStatus, jqXHR) {
                            console.log("响应成功..............");
                            if (data.result) {
                                $('#modalSave').modal('hide')
                                getAll();
                            } else {
                                window.alert(data.mess);
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            console.log("响应失败.............." + errorThrown);
                        },
                        complete: function (XMLHttpRequest, textStatus) {
                            console.log("响应结束..............");
                            //结束蒙版
                            loadingClose();
                        }
                    });
                    break;
                case "edit":
                    //修改
                    $.ajax({
                        url: "/admin/newsType/edit.action",
                        dataType: "json",
                        type: "post",
                        data: {
                            id: $("#id").val(),
                            name: $("#name").val()
                        },
                        beforeSend: function (XMLHttpRequest) {
                            console.log("准备开始请求后端..............");
                            //开启蒙版
                            loadingOpen();
                        },
                        success: function (data, textStatus, jqXHR) {
                            console.log("响应成功..............");
                            if (data.result) {
                                $('#modalSave').modal('hide')
                                getAll();
                            } else {
                                window.alert(data.mess);
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            console.log("响应失败.............." + errorThrown);
                        },
                        complete: function (XMLHttpRequest, textStatus) {
                            console.log("响应结束..............");
                            //结束蒙版
                            loadingClose();
                        }
                    });
                    break;
            }

            // if($("#modalSave").data("save")==="add"){
            //
            // }
            //
            // if($("#modalSave").data("save")==="edit"){
            //
            // }



        });


    });


</script>